import React, { useState, useEffect } from "react";
import {
  Card,
  Breadcrumb,
  Layout,
  Form,
  Menu,
  Input,
  Row,
  Col,
  Button,
  Switch,
  Popconfirm,
  Drawer,
  Select,
} from "antd";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  HeartTwoTone,
} from "@ant-design/icons";
import {
  getComponentList,
  getComponentType,
  addComponent,
  searchComponent,
  searchByName,
} from "../../api/component/index";
import { componentType } from "../../api/component/data";
import Meta from "antd/lib/card/Meta";
import Item from "antd/lib/list/Item";
import data from "../../api/component/data";
// 导入nanoid库
import { nanoid } from "nanoid";

const { Content } = Layout;

function Home() {
  //时间戳
  const timestamp = Date.parse(new Date());

  const [update, setUpDate] = useState([]);

  const [visible, setVisible] = useState(false);
  const [consirmLoading, setConfirmLoading] = React.useState(false);
  const [from] = Form.useForm();
  const [componentType, setComponentType] = useState([]);
  console.log(componentType);

  // const [slelct,setSelect] =useState([]);

  useEffect(() => {
    setComponentType(getComponentType());
  }, []);
  const [componentList, setComponentList] = useState([]);
  console.log(componentList);

  useEffect(() => {
    setComponentList(getComponentList());
  }, []);

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log("Clicked cancel button");
    setVisible(false);
  };

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };

  const handleSearch = (evt) => {
    console.log(evt.target.value);
    let newComponentList = componentList.filter((item) =>
      item.name.includes(evt.target.value)
    );
    setComponentList(newComponentList);
  };

  const handleClick = (e) => {
    console.log("click ", e);
    let newComponentList = searchComponent(e.key);
    setComponentList(newComponentList);
  };

  const onFinish = (values) => {
    const data = {
      id: nanoid(),
      name: values.name,
      type: values.type,
      state: {
        text: "已启动",
        value: "enabled",
      },
      creatorId: nanoid(),
      createTime: timestamp,
      configuration: {
        host: "0.0.0.0",
        port: "9112",
        maxMessageSize: 8096,
      },
      shareCluster: true,
      typeObject: {
        name: values.type,
        text: values.type,
        value: values.type,
      },
    };
    console.log(data);
    addComponent(data);
  };

  const onFinishFailed = () => {};

  const handleDelete = (id) => {
    console.log(id);
    let newComponentList = componentList.filter((item) => item.id !== id);
    setComponentList(newComponentList);
  };
  return (
    <>
      <Card style={{ height: 160, position: "relative", bottom: 10 }}>
        <Breadcrumb separator=">">
          <Breadcrumb.Item href="/home">角色管理</Breadcrumb.Item>
          <Breadcrumb.Item href="/home/1">组件管理</Breadcrumb.Item>
        </Breadcrumb>
        <Form>
          <Form.Item label="组件类型">
            <Menu
              mode="horizontal"
              defaultSelectedKeys={["ALL"]}
              onClick={handleClick}
            >
              <Menu.Item key="ALL">全部</Menu.Item>
              {componentType.map((tag) => (
                <Menu.Item key={tag.name}>{tag.name}</Menu.Item>
              ))}
            </Menu>
          </Form.Item>
        </Form>
        <Form>
          <Form.Item name="name" label="其他选项:">
            <Form.Item label="配置名称:">
              <Input style={{ width: 300 }} onPressEnter={handleSearch} />
            </Form.Item>
          </Form.Item>
        </Form>
      </Card>
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Card bordered={false} style={{ height: 180 }}>
            <Button
              type="text"
              style={{
                position: "absolute",
                top: "0",
                left: "0",
                right: "0",
                bottom: "0",
                margin: "auto",
              }}
              icon={<PlusOutlined />}
              onClick={showDrawer}
            >
              新增组件
            </Button>
          </Card>
        </Col>
        {componentList.map((lis) => (
          <Col span={6}>
            <Card
              key={lis.id}
              style={{ height: 180 }}
              cover={
                <div
                  style={{ fontSize: 20, position: "relative", marginLeft: 10 }}
                >
                  <HeartTwoTone />
                  {lis.name}
                </div>
              }
              actions={[
                <EditOutlined key="edit" title="编辑" />,
                <DeleteOutlined
                  key="delete"
                  title="删除"
                  onClick={() => handleDelete(lis.id)}
                />,
              ]}
            >
              <Meta description={lis.typeObject.value} title="组件类型:" />
              <span style={{ position: "absolute", right: 15, bottom: 100 }}>
                启用状态
              </span>
              <Popconfirm
                title="是否进行此操作?"
                okText="确定"
                cancelText="取消"
                onConfirm={handleOk}
                onCancel={handleCancel}
              >
                <Switch
                  style={{ position: "absolute", right: 20 }}
                  checked={lis.state.value === "enabled"}
                  onChange={() => {
                    if (lis.state.value === "enabled") {
                      lis.state.value = "disabled";
                    } else {
                      lis.state.value = "enabled";
                    }
                    setUpDate({});
                  }}
                />
              </Popconfirm>
            </Card>
          </Col>
        ))}
      </Row>
      <Drawer
        title="新建网络组件"
        placement="right"
        visible={visible}
        onClose={onClose}
      >
        <Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
          <Form.Item
            name="name"
            label="组件名称"
            rules={[{ required: true, message: "组件名不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="type"
            label="组件类型"
            rules={[{ required: true, message: "组件类型不能为空" }]}
          >
            <Select placeholder="请选择组件类型">
              {componentType.map((tag) => (
                <Select.Option value={tag.name}>{tag.name}</Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Button
            style={{ position: "absolute", left: 100, bottom: 10 }}
            type="default"
          >
            取消
          </Button>
          <Button
            style={{ position: "absolute", right: 100, bottom: 10 }}
            type="primary"
            htmlType="submit"
          >
            保存
          </Button>
        </Form>
      </Drawer>
    </>
  );
}

export default Home;
